<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>创作者中心</title>
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="./css/create.css">

   <!-- <style>
      html {
         filter: grayscale(100%)
      }
   </style> -->
</head>

<body>
   <!-- 头部导航栏 -->
   <div class="g-topbar">
      <div class="m-top">
         <div class="g-topbar-log">
            <a href="../index/index.html" class="log">

            </a>
         </div>
         <div class="m-nav">
            <ul>
               <li>
                  <span>
                     <a href="../index/index.html">发现音乐</a>
                  </span>
               </li>
               <li>
                  <span>
                     <a href="../mine/mine.html">我的音乐</a>
                  </span>
               </li>
               <li>
                  <span>
                     <a href="#">关注</a>
                  </span>
               </li>
               <li>
                  <span>
                     <a href="../Shopping/Shopping.html">商城</a>
                  </span>
               </li>
               <li>
                  <span>
                     <a href="../musician/musician.html">音乐人</a>
                  </span>
               </li>
               <li>
                  <span>
                     <a href="../download/download.html">下载客户端</a>
                  </span>
               </li>
            </ul>
         </div>
         <div class="g-topbar-search">
            <span></span>
            <input type="text" placeholder="音乐/视频/电台/用户">
         </div>
         <div class="g-topbar-ori">
            <a href="#">
               创作者中心
            </a>
         </div>
         <div class="enter">
            <a href="../user/user.html">登录</a>
         </div>
      </div>
   </div>
   <!-- 头部导航栏结束 -->

   <!-- 身体部分开始 -->
   <div class="g-bd g-bd-full">
      <div class="creator-title">
         <h1>创作者中心</h1>
      </div>
      <div class="creator-subtitle">
         <p>
            · 请选择身份进入管理平台 ·
         </p>
      </div>
      <div class="creator-box-wrap">
         <div class="all">
            <a href="#">
               <img src="./images/yinyue.png" alt="">
               <h2>网易音乐人</h2>
               <p>欢迎所有音乐”妄想“</p>
            </a>
         </div>
         <div class="all center">
            <a href="#">
               <img src="./images/ship.png" alt="">
               <h2>云音乐达人</h2>
               <p>视频Mlog、声音创作</p>
            </a>
         </div>
         <div class="all">
            <a href="#">
               <img src="./images/tebie.png" alt="">
               <h2>LOOK主播</h2>
               <p>让世界看见特别的你</p>
            </a>
         </div>
      </div>
      <div class="entry-wrapper">
         <div class="all">
            <div class="left">
               <h2>公司 <span>/</span> 厂牌</h2>
               <p>赋能厂牌数字化管理，发挥音乐无限可能</p>
            </div>
            <a href="#" class="right">
               进入
            </a>
         </div>
         <div class="all">
            <div class="left">
               <h2>音乐视频MCN</h2>
               <p>流量资源和奖金扶持、亿级...
                  <a href="#">查看详情 <span> ></span></a>
               </p>
            </div>
            <a href="#" class="right">
               进入
            </a>
         </div>
      </div>
   </div>
   <!-- 身体部分结束 -->

   <!-- 尾部区域开始 -->
   <div class="g-ft">
      <div class="m-ft">
         <div class="f-cd">
            <ul>
               <li>
                  <a href="#" class="a1">
                     <span></span>
                     <p>音乐开放平台</p>
                  </a>
               </li>
               <li>
                  <a href="#" class="a2">
                     <span></span>
                     <p>云村交易所</p>
                  </a>
               </li>
               <li>
                  <a href="#" class="a3">
                     <span></span>
                     <p>Amped Studio</p>
                  </a>
               </li>
               <li>
                  <a href="#" class="a4">
                     <span></span>
                     <p>用户认证</p>
                  </a>
               </li>
               <li>
                  <a href="#" class="a5">
                     <span></span>
                     <p>独立音乐人</p>
                  </a>
               </li>
               <li>
                  <a href="#" class="a6">
                     <span></span>
                     <p>赞赏</p>
                  </a>
               </li>
               <li>
                  <a href="#" class="a7">
                     <span></span>
                     <p>视频激励</p>
                  </a>
               </li>
            </ul>
         </div>
         <div class="copy">
            <p class="p1">
               <a href="#">服务条款</a><span>|</span>
               <a href="#">隐私政策</a><span>|</span>
               <a href="#">儿童隐私政策</a><span>|</span>
               <a href="#">版权投诉</a><span>|</span>
               <a href="#">投资者关系</a><span>|</span>
               <a href="#">广告合作</a><span>|</span>
               <a href="#">联系我们</a>
            </p>
            <p>
               <a href="#">廉正举报</a>
               <span class="s1">不良信息举报邮箱:51jubao@service.netease.com</span>
               <span>客服热线：95163298</span>
            </p>
            <p>
               <span>互联网宗教信息服务许可证：浙（2022）0000120</span>
               <a href="#">粤B2-20090191-18 工业和信息化部备案管理系统网站</a>
               <span class="logo"><img src="./images/police.png" alt=""></span>
               <a href="#">浙公网安备 33010902002564号</a>
            </p>
            <p>
               <span>网易公司版权所有©1997-2022</span>
               <span>杭州乐读科技有限公司运营：</span>
               <a href="#">浙网文[2021] 1186-054号</a>
            </p>

         </div>
      </div>
      <a href="#" class="top">TOP</a>
   </div>
   <!-- 底部进度条 -->
   <div class="f-updown">
      <!-- 锁 -->
      <div class="locks">
         <div class="lock">
            <a href="#" class="button"></a>
         </div>
         <div class="lock-right"></div>
      </div>
      <!-- 背景图 -->
      <div class="background"></div>
      <div class="hand"></div>
      <!-- 播放部分 -->
      <div class="f-play-music">
         <div class="btns">
            <a href="#" class="prev"></a>
            <a href="#" class="play"></a>
            <a href="#" class="next"></a>
         </div>
         <div class="def-cover">
            <img src="./images/default_album.jpg" alt="">
            <a href="#"></a>
         </div>
         <div class="play-process">
            <div class="words"></div>
            <!-- 外部容器 -->
            <div class="pbar">
               <!-- 包裹进度条 -->
               <div class="barbg">
                  <!-- 进度条 -->
                  <div class="ready">
                     <!-- 圆角 -->
                     <div class="curser">
                        <span class="btn"></span>
                     </div>
                  </div>
               </div>
               <span class="time">
                  <em>00:00</em>
                  / 00:00
               </span>

            </div>
         </div>
         <!-- 收藏分享部分 -->
         <div class="operations">
            <a href="#" class="icn icn-pip"></a>
            <a href="#" class="icn icn-add"></a>
            <a href="#" class="icn icn-share"></a>
         </div>
         <div class="controls">
            <!-- 音量控制按键 -->
            <a href="#" class="icn volume"></a>
            <div class="m-vol">
               <div class="barbg"></div>
               <div class="vbg">
                  <div class="curr">
                     <span class="btn"></span>
                  </div>
               </div>
            </div>
            <!-- 播放方式 -->
            <a href="#" class="icn mode"></a>
            <div class="modetip">随机</div>
            <!-- 播放列表 -->
            <span class="add">
               <a href="#" class="icn list"></a>
            </span>
            <div class="f-playlist">
               <div class="listhd">
                  <h4>播放列表（0）</h4>
                  <a href="#" class="addall">
                     <span></span>
                     收藏全部
                  </a>
                  <span class="line"></span>
                  <a href="#" class="clear">
                     <span></span>
                     清除
                  </a>
                  <span class="f-close"></span>
               </div>
               <div class="listbd">
                  <div class="listmsk">
                     <div class="msk">
                        <i></i>
                        你还没有添加任何歌曲
                        <br>
                        去首页发现音乐，或在我的音乐收听自己收藏的歌单。
                     </div>
                  </div>
                  <div class="bline"></div>
                  <div class="ask">
                     <a href="#"></a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

   <script>
      //阻止所有的a刷新界面
      const as = document.querySelectorAll('.f-updown a')
      for (let i = 0; i < as.length; i++) {
         as[i].addEventListener('click', function (e) {
            e.preventDefault()
         })
      }
      //底部显示隐藏
      const hand = document.querySelector('.f-updown')
      const lock = document.querySelector('.lock a')
      let flag = true
      hand.addEventListener('mouseenter', function () {
         document.querySelector('.f-updown').style.bottom = 0
      })

      function fn() {
         document.querySelector('.f-updown').style.bottom = '-45px'
      }
      hand.addEventListener('mouseleave', fn)
      //锁
      lock.addEventListener('click', function () {
         flag = !flag
         if (flag) {
            lock.classList.remove('lockdown')
            hand.addEventListener('mouseleave', fn)
         } else {
            lock.classList.add('lockdown')
            document.querySelector('.f-updown').style.bottom = 0
            hand.removeEventListener('mouseleave', fn)
         }

      })
      //进度条
      const ready = document.querySelector('.ready')
      const curser = document.querySelector('.pbar .curser')
      curser.onmousedown = function (e) {
         e = e || window.e
         const progressLeft = e.clientX - this.offsetLeft
         document.onmousemove = function (e) {
            e = e || window.e
            const progressX = e.clientX - progressLeft
            if (progressX <= 0) {
               progressX = 0;
            } else if (progressX >= 493) {
               progressX = 493;
            }
            curser.style.left = progressX + 'px'
            ready.style.width = progressX + 'px'
         }
         document.onmouseup = function (e) {
            e = e || window.e
            document.onmousemove = null
            document.onmouseup = null
         }
         return false
      }
      //播放按钮切换
      const play = document.querySelector('.btns .play')
      play.addEventListener('click', function () {
         flag = !flag
         if (flag) {
            play.classList.add('palse')
         } else {
            play.classList.remove('palse')
         }
      })
      //音量
      const vol = document.querySelector('.volume')
      vol.addEventListener('click', function () {
         flag = !flag
         if (flag) {
            document.querySelector('.m-vol').style.display = 'block'
         } else {
            document.querySelector('.m-vol').style.display = 'none'
         }
      })
      //音量大小调节
      const vbtn = document.querySelector('.curr .btn')
      const vcur = document.querySelector('.vbg .curr')
      vbtn.onmousedown = function (e) {
         e = e || window.e
         const progressTop = e.clientY - this.offsetTop
         document.onmousemove = function (e) {
            e = e || window.e
            const progressY = e.clientY - progressTop
            if (progressY >= 0) {
               progressY = 0;
            } else if (progressY <= -90) {
               progressY = -90;
            }
            vcur.style.height = -progressY + 'px'
         }
         document.onmouseup = function (e) {
            e = e || window.e
            document.onmousemove = null
            document.onmouseup = null
         }
         return false
      }
      //随机播放
      const mode = document.querySelector('.mode')
      const playmode = ['随机', '单曲循环', '循环']
      let f = 0
      mode.addEventListener('click', function () {
         if (f > 2) f = 0
         document.querySelector('.modetip').style.display = 'block'
         document.querySelector('.modetip').innerHTML = playmode[f]
         if (f === 0) {
            document.querySelector('.mode').classList.remove('mode1')
            document.querySelector('.mode').classList.remove('mode2')
         }
         if (f === 1) {
            document.querySelector('.mode').classList.add('mode1')
         }
         if (f === 2) {
            document.querySelector('.mode').classList.add('mode2')
         }
         f++
      })
      mode.addEventListener('mouseleave', function () {
         document.querySelector('.modetip').style.display = 'none'
      })
      //播放列表
      const clos = document.querySelector('.f-close')
      clos.addEventListener('click', function () {
         document.querySelector('.f-playlist').style.display = 'none'
      })
      const showadd = document.querySelector('.controls .add')
      showadd.addEventListener('click', function () {
         flag = !flag
         document.querySelector('.f-playlist').style.display = flag ? 'block' : 'none'
      })
   </script>
   <!-- 尾部区域结束 -->
   <style>
      html {
         /* 滚动的行为：丝滑 */
         scroll-behavior: smooth;
      }
   </style>
   <script>
      const el = document.querySelector('.top')
      window.addEventListener('scroll', function () {
         //获取页面滚动的距离
         const n = document.documentElement.scrollTop
         if (n > 70) {
            //侧边栏显示
            el.style.opacity = 1
         } else {
            //侧边栏隐藏
            el.style.opacity = 0
         }
      })

      const backTop = document.querySelector('.g-topbar')
      backTop.addEventListener('click', function () {
         document.documentElement.scrollTop = 0
      })
   </script>


   <script src="./js/create.js"></script>

</body>

</html>